<template>
  <div class="detail" ref="detail">
    <div class="bg-img" ref="bg" :style="bgStyle">
      <div class="top">
        <i class="icon-back" @click="$router.back()"></i>
        <h1>{{name}}</h1>
      </div>
      <div class="playBtn" ref="btn">
       <my-button size="medium" color="yellow" @click="randomPlay(songs)"></my-button>
      </div>
      <div class="fliter" ref="fliter"></div>
    </div>
    <div class="perch" ref="perch"></div>
    <scroll class="list" ref="list" :lisen="true" :probe-type="3" @scroll="onScroll">
      <list :data="songs" :rank="rank" type="song" @select="selectSong"></list>
    </scroll>
  </div>
</template>

<script>
  import Scroll from "@/base/scroll/Scroll";
  import List from "@/base/list/List";
  import {playListMixin, randomPlayOptions, selectOptions} from "@/common/js/mixin";
  import {method} from "@/config/mode-config/config";
  import MyButton from "@/base/button/myButton";

  const MIN_HEIGHT = 40
    export default {
        name: "MusicList",
        mixins: [playListMixin,selectOptions,randomPlayOptions],
        props:{
            rank: {
              type: Boolean,
              default: false
            },
            bgImg: {
                type: String,
                default: ''
            },
            name: {
                type: String,
                default: ''
            },
            songs: {
                type: Array,
                default: null
            }
        },
        data(){
            return {
                currentY: 0
            }
        },
        mounted(){
            this.init()
            this.setFlag(method.addAll)
        },
        components: {MyButton, Scroll,List},
        computed:{
            bgStyle() {
                return `background-image: url(${this.bgImg})`
            }
        },
        methods:{
            init(){
                this.bgHeight = this.$refs.bg.clientHeight
                this.offset = -this.bgHeight + MIN_HEIGHT
                this.$refs.list.$el.style.top =`${this.bgHeight}px`
            },
            handlePosition(){
                this.$refs.detail.style.bottom = '60px'
            },
            onScroll(y){
                this.currentY = y
            }
        },
        watch: {
            currentY(newY){
                let offset = Math.max(this.offset,newY)
                const percent = Math.abs(newY / this.bgHeight)
                let scale = 1
                let blur = 0
                let zIndex = 0
                if(newY > 0)
                    scale = 1 + percent
                else
                    blur = Math.min(20,20*percent)
                this.$refs.perch.style['transform'] = `translateY(${offset}px)`
                this.$refs.fliter.style['backdrop-filter'] = `blur(${blur}px)`

                if(newY < this.offset){
                    zIndex = 10
                    this.$refs.bg.style['height'] = `${MIN_HEIGHT}px`
                    this.$refs.bg.style['padding-top'] = 0
                    this.$refs.btn.style['display'] = 'none'
                }else {
                    this.$refs.bg.style['height'] = 0
                    this.$refs.bg.style['padding-top'] = '70%'
                    this.$refs.btn.style['display'] = ''
                }
                this.$refs.bg.style['z-index'] = zIndex
                this.$refs.bg.style['transform'] = `scale(${scale})`
            }
        }
    }
</script>

<style scoped lang="stylus">
  @import "~common/stylus/variable"
  .detail
    position fixed
    top 0
    bottom 0
    left 0
    right 0
    z-index 100
    background $color-background
    .bg-img
      position relative
      height 0
      padding-top 70%
      background-size cover
      .top
        position absolute
        top 0
        width 100%
        height 40px
        z-index 20
        .icon-back
          font-size 24px
          margin 0 10px
          vertical-align .8ex
          color $color-theme
        h1
          line-height 40px
          width 80%
          text-align center
          display inline-block
          white-space nowrap
          text-overflow ellipsis
          overflow hidden
          color $color-text
          font-size $font-size-large

      .fliter
        position absolute
        top 0
        width 100%
        height 100%
        background rgba(7, 17, 27, 0.4)

      .playBtn
        position absolute
        z-index 1
        left 50%
        transform translateX(-50%)
        bottom 15px

    .perch
      position relative
      height 100%
      background $color-background
      box-sizing border-box
    .list
      position absolute
      top 0
      bottom 0
      width 100%
      margin-top 10px
      padding-left 20px
      box-sizing border-box
      background $color-background



</style>
